<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          箱型名称：<a-input :maxLength="128" v-model="searchData.boxName" style="width: 60%" />
        </a-col>
        <a-col :span="6">
          <a-button
            type="primary"
            class="searchBtn"
            @click="
              () => {
                getTableList();
              }
            "
          >
            查询
          </a-button>
          <a-button
            style="margin: 0 10px"
            type="primary"
            class="searchBtn"
            @click="resetSearch"
          >
            重置
          </a-button>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <div class="btn" style="display: flex; margin-top: 10px">
      <div class="news">
        <a-button
          type="primary"
          class="blueBtn"
          @click="addBoxBtn"
          :style="addFlag ? ' background: #ccc' : 'background: #66b1ff;'"
          style="color: #fff; border: none; margin-bottom: 10px"
          :disabled="addFlag"
        >
          新增箱型
        </a-button>
      </div>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table :columns="columns" :data-source="tableList" :pagination="false">
        <!-- //箱型名字 -->
        <span slot="boxName" slot-scope="text, record">
          <a-input
          :maxLength="128"
            :disabled="editFlag"
            :style="
              record.boxName === null || record.boxName === ''
                ? styleBack
                : styleYes
            "
            v-if="!record.edit"
            v-model="record.boxName"
          />
          <span v-else>
            {{ record.boxName }}
          </span>
        </span>
        <!-- 长 -->
        <span slot="lengthNumber" slot-scope="text, record">
          <a-input-number
            :precision="2"
            :style="
              record.lengthNumber === null || record.lengthNumber === ''
                ? styleBack
                : styleYes
            "
            v-if="!record.edit"
            style="width: 100%"
            :min="0.01"
            v-model="record.lengthNumber"
          />
          <span v-else>
            {{ record.lengthNumber }}
          </span>
        </span>
        <!-- 宽 -->
        <span slot="wideNumber" slot-scope="text, record">
          <a-input-number
            :precision="2"
            :style="
              record.wideNumber === null || record.wideNumber === ''
                ? styleBack
                : styleYes
            "
            v-if="!record.edit"
            style="width: 100%"
            :min="0.01"
            v-model="record.wideNumber"
          />
          <span v-else>
            {{ record.wideNumber }}
          </span>
        </span>
        <!-- 高 -->
        <span slot="highNumber" slot-scope="text, record">
          <a-input-number
            :precision="2"
            :style="
              record.highNumber === null || record.highNumber === ''
                ? styleBack
                : styleYes
            "
            v-if="!record.edit"
            style="width: 100%"
            :min="0.01"
            v-model="record.highNumber"
          />
          <span v-else>
            {{ record.highNumber }}
          </span>
        </span>
        <!-- 价格-->
        <span slot="cost" slot-scope="text, record">
          <a-input-number
            :precision="6"
            :style="
              record.cost === null || record.cost === '' ? styleBack : styleYes
            "
            v-if="!record.edit"
            style="width: 100%"
            :min="0.000001"
            v-model="record.cost"
          />
          <span v-else>
            {{ record.cost }}
          </span>
        </span>
        <!-- 备注 -->
        <span slot="remark" slot-scope="text, record">
          <a-input
            v-if="!record.edit"
            v-model="record.remark"
            :maxLength="128"
          />
          <span v-else>
            {{ record.remark }}
          </span>
        </span>

        <span slot="action" slot-scope="text, record">
          <a
            v-if="record.edit"
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="
              () => {
                record.edit = false;
                editFlag = true;
              }
            "
            >编辑
          </a>
          <a
            v-if="!record.edit"
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="savaRowData(record)"
            >保存
          </a>
          <a-divider type="vertical" />
          <a
            v-if="record.edit"
            href="javascript:;"
            style="text-decoration: underline; color: red"
            @click="delRowData(record)"
            >删除
          </a>
          <a
            v-if="!record.edit"
            href="javascript:;"
            style="text-decoration: underline; color: red"
            @click="cancel(record)"
            >取消
          </a>
        </span>
      </a-table>
    </a-spin>

    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
  </div>
</template>

<script>
import {
  box_pageApply,
  add_box,
  del_box,
} from "@/apis/system/setManage/addBox";
export default {
  created() {
    this.getTableList();
  },
  data() {
    return {
      editFlag: false,
      total: 1,
      spinning: false,
      searchData: {
        current: 1,
        size: 10,
        boxName: null,
      },
      tableList: [],
      styleBack: {
        border: "1px solid #f00",
        borderRadius: "5px",
      },
      styleYes: {
        border: "1px solid #ccc",
        borderRadius: "5px",
      },
      addFlag: false,
    };
  },
  methods: {
    //取消每一行
    cancel(record) {
      this.addFlag = false;
      if (!this.editFlag) {
        this.tableList.forEach((item, i) => {
          if (item.key === record.key) {
            this.tableList.splice(i, 1);
          }
        });
        record.edit = true;
      } else {
        record.edit = true;
      }
      this.getTableList();
    },
    //删除每一行
    delRowData(record) {
      let _this = this;
      this.$confirm({
        title: `确定要删除箱型名称为${record.boxName}的数据吗?`,
        cancelText: "取消",
        okText: "确定",
        onOk() {
          return new Promise((resolve) => {
            setTimeout(async () => {
              let { code } = await del_box(record.key);
              if (code === "10000") {
                _this.getTableList();
                resolve();
              }
            }, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {},
      });
    },
    //保存每一行
    async savaRowData(record) {
      if (
        record.boxName === "" ||
        record.boxName === null ||
        record.cost === "" ||
        record.cost === null ||
        record.highNumber === "" ||
        record.highNumber === null ||
        record.lengthNumber === "" ||
        record.lengthNumber === null ||
        record.wideNumber === "" ||
        record.wideNumber === null
      ) {
        this.$message.error("请检查必填项！");
        return false;
      } else {
        let rowData = { ...record };
        if (!this.editFlag) {
          rowData.key = null;
        }
        let { code } = await add_box(rowData);
        if (code === "10000") {
          record.edit = true;
          this.addFlag = false;
          this.getTableList();
        } else {
          //   this.$message.error(message);
          return;
        }
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTableList();
    },
    //新增箱型
    addBoxBtn() {
      this.tableList = [
        {
          boxName: null,
          boxUnit: "cm",
          highNumber: null,
          lengthNumber: null,
          remark: null,
          wideNumber: null,
          edit: false,
          cost: null,
          key: this.tableList.length,
        },
        ...this.tableList,
      ];
      this.editFlag = false;
      this.addFlag = true;
    },
    //表格数据
    async getTableList() {
      this.spinning = true;
      let { code, responseBody } = await box_pageApply(this.searchData);
      if (code === "200") {
        if (responseBody.records.length >= 1) {
          responseBody.records.forEach((item) => {
            item.edit = true;
          });
        }
        this.tableList = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    resetSearch() {
      let current=this.searchData.current
      let size=this.searchData.size
      this.searchData = {
        current: current,
        size: size,
        boxName: null,
      };
      this.getTableList();
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "箱型名称",
          dataIndex: "boxName",
          align: "center",
          scopedSlots: { customRender: "boxName" },
          width: "10%",
          //  fixed: "left",
        },
        {
          title: "长(cm)",
          dataIndex: "lengthNumber",
          scopedSlots: { customRender: "lengthNumber" },
          align: "center",
          width: "10%",
        },
        {
          title: "宽(cm)",
          dataIndex: "wideNumber",
          align: "center",
          width: "10%",
          scopedSlots: { customRender: "wideNumber" },
        },
        {
          title: "高(cm)",
          dataIndex: "highNumber",
          align: "center",
          scopedSlots: { customRender: "highNumber" },
          width: "10%",
        },
        {
          title: "价格",
          dataIndex: "cost",
          // ellipsis: true,
          scopedSlots: { customRender: "cost" },
          align: "center",
          width: "10%",
        },
        {
          title: "备注",
          dataIndex: "remark",
          scopedSlots: { customRender: "remark" },
          align: "center",
          width: "10%",
          // ellipsis: true,
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "10%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>